<script src="/common/dojo.js"></script>
<script>
    var waitImg='<img src="wait.gif" id="wait-img"/>';
    var signinButton='<a href=#  id="signin-button" onclick="signin();">Sign In</a>';

    function signin() {
        dojo.fadeOut({
            node:'signin-button',
            onEnd:function(){
                dojo.byId('action-div').innerHTML=waitImg;
                dojo.xhrPost({
                    form:dojo.byId('signin-form'),
                    url:'signin.php',
                    handleAs:'json',
                    load: function(data){
                        if(data.status=='ok'){
                            frameElement.parentNode.removeChild(frameElement);
                            parent.initDesktop();
                        }else if(data.status=='fail'){
                            dojo.byId('action-div').innerHTML='<p id="error-msg">'+data.msg+'</p>';
                            
                        }
                    },
                    error: function(error){
                        alert(error);
                    }
                });
            }
        }).play();
        
    }

    function oc(){
        dojo.byId('action-div').innerHTML=signinButton;
    }

</script>

<style>
    #frame-div{
        width:200px;
        padding:20px;

        font:17px "Trebuchet MS",sans-serif;
        color:gray;
    }
    #user-input,#password-input{
        font: inherit;
        height:30px;
        width:200px;
        margin-bottom:.7em;
        border:1px solid gray;
    }
    #action-div{
        height:40px;
    }
    #signin-button{
        margin-left:34%;
        padding:.2em .7em .2em .7em;
        text-decoration:none;
        color:gray;
        text-align:center;
        border:1px solid gray;
    }
    #signin-button:hover{
        background:gray;
        color:white;
    }
    #wait-img{
        margin-left:38%;
    }
    #error-msg{
        text-align:center;
        color:red;
    }
</style>

<div id="frame-div">
    <div>Please sign in</div>
    <br/>
    <form id="signin-form" method="POST" onclick="oc()">
        <label>User</label>
        <br>
        <input type="text" name="user" id="user-input" value="" />
        <br>
        <label>Password</label>
        <br>
        <input type="password" name="password" id="password-input" value="" />
        <br>
        <input type="checkbox" name="remember"/>Remember me
    </form>

    <div id="action-div">
        <a href=#  id="signin-button" onclick="signin();">Sign In</a>
    </div>
</div>


